<template>
  <div class="plate-content">
    <div class="center">
      <div class="banner">
        <div class="board" v-for="(item, index) in saleAmount" :key="index">
          <div class="banner-list" v-if="item !== '.'">
            {{ item }}
            <div class="line"></div>
          </div>
          <div class="banner-spot" v-else></div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-list">
        <label>{{ toFixedTwo(titleList.currMonthIncome) }}</label>
        <span>本月新增收入(万)</span>
      </div>
      <div class="bottom-list">
        <label>{{ toFixedTwo(titleList.currYearIncome) }}</label>
        <span>今年累计收入(万)</span>
      </div>
      <div class="bottom-list">
        <label>{{ toFixedTwo(titleList.yearProfile) }}</label>
        <span>今年累计利润(万)</span>
      </div>
    </div>
  </div>
</template>

<script>
import numberToUpper from "@/utils/numberToUpper";
import { mapState } from "vuex";
import request from "@/utils/request";
import Qs from "qs";
export default {
  name: "vi-plate",
  data() {
    return {
      titleList: {
        saleAmount: "",
        currMonthIncome: "",
        currYearIncome: "",
        yearProfile: "",
      },
    };
  },
  //   props: {
  //     titleList: {
  //       default: {
  //         saleAmount: "",
  //         currMonthIncome: "",
  //         currYearIncome: "",
  //         yearProfile: "",
  //       },
  //     },
  //   },
  computed: {
    ...mapState("reportFormDark", ["deptId", "projectId"]),
    saleAmount() {
      return String((this.titleList.saleAmount / 10000).toFixed(2)) || "0";
    },
  },
  watch:{
    deptId: {
      handler(val) {
        this.$nextTick(() => {
          this.screenTitle(); 
        });
      },
      immediate: true,
    },
    projectId: {
      handler(val) {
        this.$nextTick(() => {
          this.screenTitle(); 
        });
      },
    },
  },
  created() {
  },
  methods: {
    screenTitle() {
      request({
        url: "/system/screen/title",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId:this.deptId,
          projectId:this.projectId,
        }),
      }).then((res) => {
        /**
         * saleAmount  销售额
         * currMonthIncome  本月新增收入
         * currYearIncome  今年累计收入
         * yearProfile  今年累计利润
         */
        this.titleList = res.data;
      });
    },
    toFixedTwo(msg) {
      if (!msg) {
        return "--";
      } else {
        return (Number(msg) / 10000).toFixed(2);
      }
    },
    
    toNumsaleAmount() {
      return numberToUpper(
        (this.titleList.saleAmount / 10000).toFixed(2) * 10000 || 0
      );
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/views/report_form_dark/styles/fn.scss";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.plate-content {
  width: 100%;
  height: 100%;
  position: relative;
  padding-top: vw(20) !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .center {
    width: 100%;
    display: flex;
    flex-direction: column;

    .banner {
      margin: 0 auto;
      min-width: 10px;
      width: auto;
      height: vw(104);
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;

      &::after {
        content: "万元";
        position: absolute;
        right: vw(-22);
        top: vw(32);
        display: block;
        width: vw(22);
        height: vw(49);
        font-size: vw(18);
        font-family: Microsoft YaHei UI;
        font-weight: 400;
        color: rgba(143, 199, 255, 1);
        opacity: 0.48;
      }

      .board {
        display: flex;
        flex-direction: row;

        .banner-list {
          text-align: center;
          width: vw(48);
          height: vw(64);
          border: 1px solid #1890ff;
          background: linear-gradient(
            180deg,
            rgba(22, 93, 214, 0.31) 0%,
            #132c94 100%
          );
          box-shadow: 0px 1px vw(3) rgba(95, 107, 129, 0.16);
          border-radius: vw(2);
          margin: 0 vw(4);
          font-size: vw(48);
          font-family: Bahnschrift;
          font-weight: bold;
          // line-height: vw(64);
          display: flex;
          justify-content: center;
          align-items: center;
          color: rgba(83, 237, 255, 1);
          padding-top: vh(10);
          position: relative;

          &::before {
            content: "";
            position: absolute;
            top: vw(28);
            left: vw(-1.5);
            width: vw(4);
            height: vw(12);
            background: rgba(0, 0, 0, 0);
            border-radius: 0px vw(3) vw(3) 0px;
          }

          &::after {
            content: "";
            position: absolute;
            top: vw(28);
            right: vw(-1.5);
            width: vw(4);
            height: vw(12);
            background: rgba(0, 0, 0, 0);
            border-radius: 0px vw(3) vw(3) 0px;
          }

          .line {
            &::before {
              content: "";
              position: absolute;
              top: vw(26);
              left: vw(-1.5);
              width: vw(6);
              height: vw(12);
              border: 1px solid #1890ff;
              border-radius: vw(10);
              background: #000;
              border-left: none;
            }

            &::after {
              content: "";
              position: absolute;
              top: vw(26);
              right: vw(-1.5);
              width: vw(6);
              height: vw(12);
              border: 1px solid #1890ff;
              border-radius: vw(10);
              background: #000;
              border-right: none;
            }
          }
        }

        .banner-spot {
          width: vw(6);
          height: vw(6);
          background: #8fc7ff;
          margin: 0 vw(4);
          margin-top: 6px;
        }
      }
    }
  }

  .bottom {
    width: 100%;
    height: vw(76);
    padding: vw(16) 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    &-list {
      width: calc(100% / 3);
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      label {
        font-size: vw(24);
        font-family: Bahnschrift;
        font-weight: 400;
        color: rgba(24, 144, 255, 1);
      }

      span {
        font-size: vw(14);
        font-family: Microsoft YaHei UI;
        font-weight: 400;
        color: #8fc7ff;
        color: rgba(143, 199, 255, 0.48);
      }
    }
  }
}
</style>
